<script setup lang="ts">
import { ref } from "vue";
import { CommetList, Comment } from "@/types/article";
import ReplyComment from "./replyComment.vue";
import {
    reqGetComments,
    reqSetComment,
    reqDelGood,
    reqSetGood,
} from "@/api/article";
import { Toast } from "vant";
const list = ref<CommetList>([]);
const loading = ref(false);
const finished = ref(false);
const offset = ref("");
const commentInfo = ref("");
const isShowReply = ref(false);
const currentComment = ref();
const props = defineProps({
    articleId: String,
});
const onLoad = async () => {
    console.log(props.articleId, offset.value);
    const { data } = await reqGetComments(
        "a",
        props.articleId as string,
        offset.value
    );
    console.log("获取评论的返回", data);
    offset.value = data.data.last_id;
    const arr = data.data.results;
    console.log(arr, "-----");
    list.value = [...list.value, ...arr];
    loading.value = false;
    if (arr.length === 0) {
        finished.value = true;
    }
};
onLoad();

// 发布评论
const issue = async () => {
    if (commentInfo.value === "") return;
    console.log(props.articleId, commentInfo.value);
    const { data } = await reqSetComment(
        props.articleId as string,
        commentInfo.value
    );
    console.log("评论成功的返回", data);
    console.log(data.data.new_obj);
    // 放本地视图的最上面
    list.value.unshift(data.data.new_obj);
    Toast.success("评论成功");
    commentInfo.value = "";
    // onLoad();
};
// 切换点赞
const toggleCommentLike = async (comment: Comment) => {
    try {
        if (comment.is_liking) {
            // 是点赞状态,那就取消点赞
            await reqDelGood(comment.com_id);
            Toast.success("取消点赞");
        } else {
            // 是取消点赞的状态，那就是点赞
            await reqSetGood(comment.com_id);
            Toast.success("点赞成功");
        }
        // 数据反显
        comment.is_liking = !comment.is_liking;
    } catch (error) {
        console.log(error);
        Toast.fail("操作失败");
    }
};
const clickShowReply = (comment: Comment) => {
    isShowReply.value = true;
    currentComment.value = comment;
    console.log(currentComment.value);
};
</script>
<template>
    <div class="article-comments">
        <!-- 评论列表 -->
        <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
        >
            <van-cell
                v-if="list.length > 1"
                v-for="(item, index) in list"
                :key="index"
            >
                <van-image
                    slot="icon"
                    round
                    width="30"
                    height="30"
                    style="margin-right: 10px"
                    :src="item.aut_photo"
                />
                <span style="color: #466b9d" slot="title">{{
                    item.aut_name
                }}</span>
                <div slot="label">
                    <p style="color: #363636">{{ item.content }}</p>
                    <p style="display: flex; justify-content: space-between">
                        <span style="margin-right: 10px">{{
                            item.pubdate
                        }}</span>
                        <van-button
                            @click="clickShowReply(item)"
                            size="mini"
                            type="default"
                            >回复</van-button
                        >
                        <van-icon
                            @click="toggleCommentLike(item)"
                            slot="right-icon"
                            :name="item.is_liking ? 'like' : 'like-o'"
                        />
                    </p>
                </div>
            </van-cell>
        </van-list>
        <!-- 评论列表 -->

        <!-- 发布评论 -->
        <van-cell-group class="publish-wrap">
            <van-field
                clearable
                v-model.trim="commentInfo"
                placeholder="请输入评论内容"
                @keyup.enter="issue"
            >
                <template #button>
                    <van-button @click="issue" size="mini" type="primary"
                        >发布</van-button
                    >
                </template>
            </van-field>
        </van-cell-group>
        <!-- /发布评论 -->
        <van-popup
            v-model:show="isShowReply"
            round
            position="bottom"
            :style="{ height: '85%' }"
        >
            <ReplyComment
                v-if="isShowReply"
                :articleId="articleId"
                :currentComment="currentComment"
                @closeReply="isShowReply = false"
            ></ReplyComment>
        </van-popup>
    </div>
</template>

<style scoped lang="scss">
// 发表评论的区域是固定在下端的
.publish-wrap {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
}
// 给发表评论区空出地方
.van-list {
    margin-bottom: 45px;
}
</style>
